<template>
  <div class="shopCart-con">
    <div class="w">
      <div class="shopcart-top">
        <div class="back" @click="$router.back()">
          <img src="imgs/icon-left.png" alt="">
        </div>
        <div class="title">
          购物车
        </div>
        <div class="search" @click="$router.push('/search')">
          <img src="imgs/icon-search.png" alt="">
        </div>
      </div>
      <div class="isLogin" @click="$router.push('login')" v-show="!token">
        <span>登入后享受更多优惠</span>
        <span class="goLogin">去登入<img src="imgs/icon-right.png" alt=""></span>
      </div>
      <!-- 每一项商品 -->
      <div class="cart-item" v-for="(item,index) in shopCart" :key="index" v-show="shopCart.length>=1">
        <div class="checkbox">
          <input type="checkbox" name="" id="" :checked=item.seleted @click="item.seleted=!item.seleted">
        </div>
        <div class="img">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="text">
          <div class="name">{{item.name}}</div>
          <div class="price">售价: {{item.price}}元</div>
          <div class="num">
            <span>
              <van-icon name="minus" @click="addOrSubNum(1,item)" />
            </span>
            <span>{{item.num}}</span>
            <span>
              <van-icon name="plus" @click="addOrSubNum(2,item)" />
            </span>
          </div>

        </div>
        <div class="deleted" @click="remove(index)">
          <img src="imgs/icon-deleted.png" alt="">
        </div>
      </div>
      <div class="line" v-show="shopCart.length>=1"></div>
      <div class="tishi" v-show="shopCart.length>=1">温馨提示:商品是否购买成功以最终下单结果为准</div>
      <div class="line" v-show="shopCart.length>=1"></div>
      <!-- 购物车没有商品显示的盒子 -->
      <div class="noList" v-show="shopCart.length==0">
        购物车还是空的
        <router-link to="/">去逛逛</router-link>
      </div>
    </div>
    <!-- 底部结算 -->
    <div class="footer" v-if="shopCart.length>0">
      <div class="footer-price">
        <div class="num">选中 {{sum}} 件</div>
        <div class="price">共 {{price}} 元</div>
      </div>
      <div class="goShop">
        继续购物
      </div>
      <div class="goBuy" @click="goBuy">
        立即结算
      </div>
    </div>
    <FooterTab v-else></FooterTab>

  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { get, set } from '@/Storage/index.js'
import { goBuy } from '@/api/requests.js'
export default {
  name: 'ShopCart',
  data() {
    return {}
  },
  computed: {
    ...mapState(['shopCart']),
    // 第一个是选中的商品  第二个是选中商品的总价 第三个是选中商品的总和
    ...mapGetters(['seletedProduct', 'price', 'sum']),
    token() {
      return get('token')
    }
  },
  methods: {
    // 添加获取减少商品数量
    addOrSubNum(id, i) {
      if (id === 1) {
        i.num <= 1 ? this.$toast('数量不能小于1') : i.num--
      } else {
        i.num >= 10 ? this.$toast('数量不能大于10') : i.num++
      }
    },
    // 删除商品
    remove(i) {
      this.$store.commit('REMOVEPRODUCT', i)
    },
    // 购物车商品结算
    async goBuy() {
      if (this.seletedProduct.length === 0) {
        this.$dialog.alert({
          message: '请选中要提交的商品'
        })
      } else {
        const res = await goBuy()
        if (res) {
          set('productList', this.seletedProduct)
          this.$store.commit('CHANGESHOWORDER', true)
          this.$router.push('/setOrder')
        } else {
          this.$notify({ type: 'primary', message: '先登入' })
        }
      }
    }
  }
}
</script >

<style lang='less' scoped>
.shopCart-con {
  font-size: 28px;
  .w {
    width: 720px;
    height: 100%;
    margin: 0 auto;
    .shopcart-top {
      position: sticky;
      top: 0.1px;
      display: flex;
      height: 50px;
      justify-content: space-between;
      align-items: center;
      background-color: #f2f2f2;
      padding: 0 20px;
      .title {
        width: 100%;
        text-align: center;
      }
      img {
        width: 50px;
        height: 50px;
      }
    }
    .isLogin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      .goLogin {
        font-size: 24px;
        img {
          vertical-align: middle;
          width: 25px;
          height: 25px;
        }
      }
    }
    .cart-item {
      display: flex;
      justify-content: start;
      align-items: center;
      height: 228px;
      padding: 24px 0;
      .checkbox {
        width: 70px;
        padding: 0 20px;
        input {
          width: 30px;
          height: 30px;
        }
      }
      .img {
        border: 1px solid #f5f5f5;
        margin-right: 15px;
        img {
          width: 178px;
          height: 178px;
        }
      }
      .text {
        height: 178px;
        .name {
          width: 360px;
        }
        .price {
          color: #9d9d9d;
          font-size: 24px;
          margin: 5px 0;
        }
        .num {
          span {
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background-color: #f4f4f4;
          }
        }
        .deleted {
          width: 60px;
          font-size: 40px;
        }
      }
    }
    .tishi {
      padding: 15px 20px;
      font-size: 24px;
      color: #9c9c9c;
    }
    .noList {
      height: 120px;
      padding: 20px;
      background-color: #ebebeb;
      text-align: center;
      line-height: 100px;
      a {
        color: #ff6600;
      }
    }
  }
  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #fff;
    .footer-price {
      width: 33.3%;
      line-height: 28px;
      padding-top: 15px;
      .price {
        color: #ff6600;
        font-size: 32px;
        margin-top: 10px;
      }
    }
    .goShop {
      width: 33.3%;
      background: #f4f4f4;
    }
    .goBuy {
      width: 33.3%;
      background: #ff6600;
      color: #fff;
    }
  }
}
</style>
